<template>
    <div class="areaLast">
      <div class="topTitle blue getTop">
        <span class="goBack" @click="goBack"><i></i></span>
        金龟婿
      </div>

      <div class="swiper-containerd lBanner">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in listA">

  
                 <div class="areaItemBox">
                    <div class="areaBoxTop">
                          <p @touchend="goRouter(item.id)" class="logo"><img v-if="item.square_avatar!=''" :src="item.square_avatar"><img v-else :src="$store.state.defLogoBg"></p>
                          <div class="info">
                            <p class="name">{{item.nickname}}</p>
                            <p class="add" v-if="item.live_province!=null"><i></i>{{item.live_province.name}}</p>
                            <p class="txt">{{item.height}}cm · {{item.weight}}kg · {{item.constellation|dayB}}座</p>
                            <p class="span">
                              <span v-if="item.is_edu_card!=1">本科</span>
                              <span v-if="item.is_car_card!=1">有车</span>
                              <span v-if="item.is_house_card!=1">有房</span>
                              <span v-if="item.is_job_card!=1">主管</span>
                            </p>
                            <p class="txtle">
                              {{item.self_introduce|txtSplit_50}}
                            </p>
                            <p class="click">
                              <span @click="delFollow(item)" v-if="item.user_follow!=null" class="spanA on"><i class="icon1"></i>已倾心</span>
                              <span @click="getFollow(item)" v-else class="spanA"><i class="icon1"></i>倾心</span>
                              <span class="spanB" @click="goIm(item.id)"><i class="icon2"></i>嘿！你好</span>
                            </p>
                          </div>
                    </div>
                      
                  </div>
     

            </div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-paginationd"></div>
      </div>
      
    </div>
</template>

<script>
import {Post,Get,Put,Delete} from '@/config/api.js'
import Swiper from 'swiper';

export default {
  data: function () {
    return {
      listA:[],
      listB:[],
    }
  },
  mounted(){
    this.getData()
  },
  methods: {
    //去个人首页
    async goRouter(id){
      this.$router.push({ path: '/aboutShow',query: { uid: id }})
      let data={
        "visitor_user_id":id
      }
      Post('/user/visitor',this.$store.state.token,data)
    },
    //返回上一页
    goBack(){
      this.$router.go(-1)
    },
    //去聊天
    goIm(id,active){
      this.$router.push({ path: '/webim1', query: { uid: id,active:active }})
    },
    startSwiper(){
      var swiper = new Swiper('.swiper-containerd', {
        direction: 'vertical',
        pagination: {
          el: '.swiper-paginationd',
          clickable: true,
        },
      })
    },
    //请求数据
    async getData() {
      let sql='/user?gender='+this.$store.state.gender+'&_per_page=10&_sort=-charm&_include=live_province,live_city'
      if(this.vLogin()){
        sql='/user?gender='+this.$store.state.gender+'&_per_page=10&_sort=-charm&_include=user_photo,user_follow,live_province,live_city'
      }
      await Get(sql,this.$store.state.token).then((res)=>{
        this.listA=res.data
      }).then(()=>{
        this.startSwiper()
      })
    },
    //关注其他用户
    async getFollow(val){
      if(this.vLogin()){
        let data={
          follow_user_id:val.id
        }
        let reg=await Post('/user/follow',this.$store.state.token,data).then((res)=>{
          val.user_follow='已倾心'
          let data={
            static:true,
            txt:{
              type:2,
              message:"倾心成功!"
            }
          }
          this.$store.dispatch("alert",data)
          setTimeout(() => {
            this.$store.dispatch("alertClose")
          }, 1000)
        })
      }else{
        this.$router.push({ path: '/login'})
      }
        
    },
    //取消关注其他用户
    async delFollow(val){
        await Delete('/user/follow/'+val.id,this.$store.state.token).then((res)=>{
          val.user_follow=null
          let data={
            static:true,
            txt:{
              type:2,
              message:"取消倾心成功!"
            }
          }
          this.$store.dispatch("alert",data)
          setTimeout(() => {
            this.$store.dispatch("alertClose")
          }, 1000)
        })
    }

  }
}
</script>